/* main.css / app.css */


/* 测试用，打包注销 */

.container {
  /* background: url('~@/assets/images/bg.png') no-repeat;
  background-size: 100% 100%; */
}

/*  */
/**自定义滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px
}

::-webkit-scrollbar-track {
  background-color: var(--form-bg) !important;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em
}



/*  */

/* 状态 */
.state_1,
.state_2,
.state_3,
.state_4,
.state_5 {
  display: flex;
  align-items: center;
}

.state_1::before,
.state_2::before,
.state_3::before,
.state_4::before,
.state_5::before {
  content: '';
  display: inline-block;
  margin-right: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.state_1::before {
  background: var(--blue-state);
}

.state_2::before {
  background: var(--orange-state);
}

.state_3::before {
  background: var(--green-state);
}

.state_4::before {
  background: var(--red-state);
}

.state_5::before {
  background: var(--btn-disable);
}

/* 状态带边框和背景 */
.status_1 {
  background: var(--blue-state-bg);
  border: 1px solid var(--blue-state-bd);
  border-radius: 4px;
  padding: 2px 5px;
  color: var(--blue-state);
}

.status_2 {
  background: var(--orange-state-bg);
  border: 1px solid var(--orange-state-bd);
  border-radius: 4px;
  padding: 2px 5px;
  color: var(--orange-state);
}

.status_3 {
  background: var(--green-state-bg);
  border: 1px solid var(--green-state-bd);
  border-radius: 4px;
  padding: 2px 5px;
  color: var(--green-state);
}

.status_4 {
  background: var(--red-state-bg);
  border: 1px solid var(--red-state-bd);
  border-radius: 4px;
  padding: 2px 5px;
  color: var(--red-state);
}

/* 状态 结束 */
.btnwidth120 {
  width: 120px !important;
}

.el-button--primary.is-plain {
  color: #fff;
  border: 1px solid var(--border-color);
}

.el-select-dropdown {
  background: var(--input-bg) !important;
  border: 1px solid var(--border-color);
}

.el-select-dropdown__item {
  color: var(--box-font);
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: var(--input-bg-hover);
}

.el-popper[x-placement^=bottom] .popper__arrow::after {
  border-bottom-color: var(--form-bg);
}

.el-popper[x-placement^=bottom] .popper__arrow {
  border-bottom-color: var(--border-color);
}

.border-style {
  border-bottom-color: var(--box-font) !important;
}

.el-popover {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--title);
}

.el-popover__title {
  color: var(--title);

}

.vc-sketch {
  background: var(--input-bg) !important;
}

.border-color {
  border-color: var(--border-color) !important;
}

.el-input-number__decrease,
.el-input-number__increase {
  background: var(--input-bg);
}

.el-input-number__increase,
.el-input-number.is-controls-right .el-input-number__decrease {
  border-left-color: var(--border-color);
}

.el-input-number.is-controls-right .el-input-number__increase {
  border-bottom-color: var(--border-color);
}

.el-input-number__decrease,
.el-input-number__increase {
  color: var(--box-font);
}

.lf-menu,
.lf-text-input {
  background: var(--input-bg) !important;
  border: 1px solid var(--border-color) !important;
}

.lf-menu-item:hover {
  background: var(--input-bg-hover) !important;
}

.el-message-box {
  background: var(--input-bg) !important;
  color: var(--title);
  border: 1px solid var(--border-color);
}

.el-message-box__title {
  color: var(--title);
}

.el-message-box__content {
  color: var(--title);
}

.node-category-title {
  padding-bottom: 10px;
}

.el-menu {
  background: var(--form-bg-a);
  border-right: 1px solid var(--bigborder-color);
  font-size: var(--font16);
  border: 0;
}

.el-submenu__title,
.el-submenu .el-menu-item {
  color: var(--title);
  border: 1px solid var(--bigborder-color);
  margin: 5px 0;
  height: 42px;
  line-height: 42px;
  display: flex;
  align-items: center;
  padding-left: 20px !important;
  font-size: var(--font16);
}

.el-submenu__title i {
  font-size: var(--font16);
}

.el-submenu__title {
  margin-bottom: 0;
  margin-top: 0;
}

.el-submenu .el-menu {
  padding-left: 20px;
}

.el-submenu__title:hover,
.el-menu-item:focus,
.el-menu-item:hover {
  background: none;
  border: 1px solid var(--theme-color);
}

.el-submenu__title i {
  color: var(--title);
}

.el-submenu.is-active .el-submenu__title {
  border-bottom-color: var(--bigborder-color);
}

.el-menu-item.is-active {
  background: var(--theme-color);
  border: 1px solid var(--theme-color);
  color: var(--title);
}

.el-menu--inline {
  position: relative;
}

.sslNodeBtn {
  position: absolute;
  top: -37px;
  right: 33px;

}

.sslNodeBtn i {
  font-size: var(--font16) !important;
}

.el-input__inner {
  border-radius: var(--border-radius);
  height: 32px;
  line-height: 32px;
}

.el-input__icon {
  line-height: 32px;
}

/* WebKit browsers (Chrome, Safari) */
.el-input__inner::placeholder {
  color: var(--input-placeholder) !important;
}

/* Firefox */
.el-input__inner::-moz-placeholder {
  color: var(--input-placeholder) !important;
}

/* IE/Edge */
.el-input__inner:-ms-input-placeholder {
  color: var(--input-placeholder) !important;
}

/* Modern Browsers */
in.el-input__inner::placeholder {
  color: var(--input-placeholder) !important;
}

/*  */
.el-tree {
  background: none;
  color: #fff;
}

.el-table,
.el-pagination__total,
.el-pagination__jump {
  color: #fff;
}

.el-table thead {
  color: var(--form-head-fontcolor);
}

.el-table th.el-table__cell {
  background: var(--form-head);
}

.el-table tr,
.el-table {
  background: var(--form-bg);
}

.el-table {
  background: none;
}

.el-table--border,
.el-table--group {
  border: 1px solid var(--table-bottom);
}

.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid var(--table-bottom);
}

.el-table--border .el-table__cell,
.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
  border-right: 1px solid var(--table-bottom);
}

.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: var(--table-bottom);
}

.el-table--border {
  border: 1px solid var(--bigborder-color);
}

.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
  background-color: var(--table-hover);
}

.el-pagination button:disabled,
.el-pager li {
  background-color: var(--input-bg);
}

.el-table .el-table__cell {
  padding: 0;
  height: 40px;
}

.el-tree-node__content:hover,
.el-upload-list__item:hover,
.el-tree-node:focus>.el-tree-node__content {
  background: linear-gradient(270deg, rgba(0, 153, 255, 1), rgba(0, 153, 255, 0.1));
}

.el-button--text {
  background: none !important;
  border: 0 !important;
  width: auto !important;
}

.el-table__body-wrapper {
  background: var(--form-bg-a);
}

.el-form-item__label {
  color: var(--title);
}

.el-select {
  width: 100%;
}

.el-input.is-disabled .el-input__inner,
.el-input-group__append,
.el-input-group__prepend {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--box-font);
}

.el-form-item__content .el-input-group {
  vertical-align: middle;
}

.el-dialog {
  background: var(--form-bg);
  border: 1px solid var(--bigborder-color);
}

.el-dialog__header {
  padding: 10px;
  border-bottom: 1px solid var(--bigborder-color);
}

.el-dialog__headerbtn {
  top: 10px;
  right: 10px;
}

.el-dialog__title {
  color: var(--title);
}

.el-dialog__headerbtn .el-dialog__close {
  font-size: 24px;
}

.el-dialog__footer {
  border-top: 1px solid var(--bigborder-color);
  text-align: center;
  padding: 10px;
  background: var(--pop-down);
}

.el-message-box__btns {
  text-align: center;
}

.el-message-box__btns .el-button {
  color: var(--title);
  background: var(--second-color);
  border: 1px solid var(--border-color);
}
.el-message-box__btns .el-button--primary {
    background: var(--theme-color);
    border: 1px solid var(--theme-color);
}
.el-tooltip__popper.is-dark{
  background: var(--border-color);
  /* border: 1px solid var(--theme-color); */
  color: var(--title);
}
 /* 树节点过长处理方法 */
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.custom-tree-node span {
  display: inline-block;
  max-width: 158px;
  /* 根据实际情况调整宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-checkbox__inner{
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
}